extends ../layout/main

block variables
    - var title = 'Реферат'
    - var description = 'Реферат'
    - var name = 'Essay'

block content
    include ../includes/modules/header

    .wrapper
        .essay-block.word-block.container
            h1.title-text Реферат
            h2 Содержание
            ul 
                li: a(data-anchor="1") Введение
                li: a(data-anchor="2") 1. Анализ веб-сайтов для распространения материалов и текстур
                li: a(data-anchor="3") 2. Разработка макета веб-сайта
                ul 
                    li: a(data-anchor="4") 2.1 Проектирование макета веб-сайта
                    li: a(data-anchor="5") 2.2 Сбор референсов для макета
                    li: a(data-anchor="6") 2.3 Изучение возможностей программы Figma
                    li: a(data-anchor="7") 2.4 Прототип и финальный дизайн веб-сайта
                li: a(data-anchor="8") 3. Литература

            h2(data-target="1") Введение
            p Когда смоделировать объект слишком сложно, в ход идут текстуры. Разбираемся, как с их помощью создают реалистичные модели, не тратя ресурсов. За точную передачу геометрии 3D-объекта отвечает количество полигонов — тех самых векторных многоугольников, из которых состоит модель и с которыми работает дизайнер при её создании. Очевидно, что чем их больше, тем выше будет уровень детализации готовой модели. Но нельзя добавлять их до бесконечности — создание и отрисовка займут слишком много времени.
            p Текстура (иногда её называют картой) — это растровое изображение, накладываемое на поверхность модели для придания ей цвета, свойств окраски или иллюзии рельефа. Процесс создания текстур называется текстурированием или 3D-мэппингом (от англ. map — карта). Сделать цифровой образ реалистичным, сохранив минимальное количество полигонов, позволяют текстуры и материалы.
            p Использование текстур значительно ускоряет работу 3D-художника. Даже если вы создаёте модели в мультяшном стиле, без текстур не обойтись, потому что для этого понадобится как минимум указать цвета разных частей объекта.
            p Объект разработки – макет и верстка веб-сайта.
            p Предмет разработки – процесс создания макета сайта для последующей его верстки.
            p Идея работы в разработке веб-сервиса для распространения 3D-текстур и материалов.
            p Цель разработки – создать веб-сервис для удобного распространения 3D-текстур другими дизайнерами для других дизайнеров.
            p Задачи разработки. Для достижения поставленной цели сформулированы и решены следующие задачи: 
            p •	разработать макет сайта для распространения 3D-текстур и материалов; 
            p •	сверстать макет сайта для распространения 3D-текстур и материалов.
            p Способы решения.
            p •	изучить программу для создания макета Figma; 
            p •	изучить технологии для верстки сайта;
            p Веб-сайт будет предлагает цифровые материалы. На сервисе будут находиться текстуры тканей, дерева, металла, кирпича, пластика и др., которые графические дизайнеры могут использоваться для своего дизайна, визуальных эффектов, в компьютерных играх.


            h2(data-target="2") 1. Анализ веб-сайтов для распространения материалов и текстур
            p Инструменты, которые позволяют анализировать конкурентов незаменимы. Рассмотрим именно численный формат. То есть не просто зайти на сайт и посмотреть, как расположены картинки и тексты, а именно получить серьёзные численные данные.
            p Сегодня можно узнать, что происходит на сайте:
            p •	какие используются источники трафика,
            p •	как они используются,
            p •	какая у них эффективность и какая интенсивность,
            p •	какие бюджеты конкуренты тратят (или не тратят) на эти каналы.
            p Точность этих данных повысилась в последние 2 года, появились инструменты, которые помогают решать эти задачи. Поэтому конкурентный анализ — это шаг номер один в digital-проекте.
            p Для своего проекта я буду использовать сервис SimilarWeb.
            p Анализировать конкурентов по различным показателям удобнее всего в табличном виде. Чтобы иметь достаточный диапазон для оценки выберу трех конкурентов - самых крупных.
            p textures.com — это веб-сайт, который предлагает цифровые изображения всех видов материалов. Есть фотографии тканей, дерева, металла, кирпича, пластика и многого другого. Эти изображения – текстуры – могут использоваться для графического дизайна, визуальных эффектов, в компьютерных играх и в других отраслях. Сайт предлагает бесплатно скачать до 15 изображений каждый день. Если нужно больше изображений и в лучшем качестве, вы можете приобрести пакет кредитов или подписку. Помимо текстур есть HDRLs и 3D-модели. Самый старый сервис. Работает на основе подписок.
            p poliigon.com — библиотека более 1000 PBR текстур, сделанная CG художниками, для CG художников. Poliigon содержит уникальные текстуры, которые будет очень трудно найти на сторонних ресурсах, такие как узоры, знаки, PBR материалы и прочие. Работает на основе подписки, малая часть бесплатная. Помимо текстур есть HDRLs и 3D-модели. Владелец Andrew Price ведет одноименный Ютуб-канал «Poliigon» (81к подписок), а также сайт blenderguru.com и канал «Blender Guru» (2мм подписок).
            p 3dtextures.me — бесплатный сайт с текстурами. Подписка на «patreon» позволяет скачивать в более высоком качестве. На сайте можно скачать из меньшего ассортимента текстуры, чем на прошлых ресурсах. Позиционируется исключительно на текстурных картах.
            img(src="images/2023-03-20_08-16-57.png", alt="")
            p.img-caption Таблица 1 – Характеристика SimilarWeb
            p Уточню некоторые термины:
            p Показатель отказов - показывает процентное соотношение количества посетителей сайта, к количеству ушедших со страницы входа, после открытия сайта.
            p Прямые заходы — данный тип трафика предполагает, что пользователи попадают на сайт по прямой ссылке.
            p Реферальные ссылки — упоминания о вашем ресурсе на сторонних сайтах, в соцсетях и приложениях. Будут ли они платными, зависит от договорённостей, но при должной популярности и авторитете вашего ресурса есть возможность получать максимум упоминаний на безвозмездной основе.
            p Поисковый трафик — посетители, которые ввели поисковый запрос и перешли на сайт по ссылке, отобразившейся на странице результатов поиска.
            p Соц. Сети — здесь речь идёт о пользователях, попавших на сайт через ссылки, размещённые в сообществах, постах и анонсах в соцсетях.
            img(src="images/2023-03-20_08-20-33.png", alt="")
            p.img-caption Таблица 2 – Сравнительная таблица по функционалу


            h2(data-target="3") 2. Разработка макета веб-сайта
            h2(data-target="4") 2.1 Проектирование макета веб-сайта
            p На этом этапе будут спроектированы будущие блоки сайта, опираясь на собственный бриф и конкурентный анализ. Задача — описать основные блоки сайта и какой контент в них будет находиться.
            p По-другому это можно назвать информационной архитектурой. Важно понимать, что при разработке финального дизайна я могу в каких-то местах отступать от своего изначального проектирования.
            p Этот этап нужен для понимания того, что вообще должно находиться на сайте. Как и в какой вариации это будет выглядеть в конечном дизайне — второе.
            
            h2(data-target="5") 2.2 Сбор референсов для макета
            p После того, как со структурой закончили, самое время немного вдохновиться для дальнейшей работы. В этом помогут референсы, то есть работы других дизайнеров.
            p Сбор референсов можно разделить на 2 этапа:
            p •	Референсы по вашей теме
            p •	Референсы по любой другой теме
            p В первом случае, референсы по теме будут помогать в составлении будущей стилистики нашего дизайна. 
            p Например, если взять 5 сайтов из определенной индустрии, то можно заметить, что на 4 из них в дизайне используются шрифты с засечками, формы кнопок и других элементов выполнены в строгом стиле, а цветовая палитра — преимущественно пастельных тонов. Соответственно можно придерживаться именно такой стилистики, если разрабатываю дизайн для своего проекта.
            p Помимо этого, можно брать референсы по любой другой теме и искать наиболее удачные дизайн-решения, которые можно адаптировать под проект. Таким образом вдохновляясь на работу, и в дальнейшем будет примерная картина того, какая композиция будет в вашем дизайне и каким образом будут скомпонованы элементы друг с другом.
            p Шрифты использованы с 
            p: a(href="https://www.behance.net/gallery/122111617/odnostranichnyj-sajt-dlja-fotografa/modules/694465093")  https://www.behance.net/gallery/122111617/odnostranichnyj-sajt-dlja-fotografa/modules/694465093
            img(src="images/2023-03-20_08-28-56.png", alt="")
            p.img-caption Рисунок 1 – Работа Федора Харламова - Главная
            img(src="images/2023-03-20_08-29-25.png", alt="")
            p.img-caption Рисунок 2 – Работа Федора Харламова - Шрифты
            p Цвета и оформлением блоков использованы из работоты этого автора:
            p: a(href="https://www.behance.net/gallery/129162947/E-commerce-concept-online-store?tracking_source=search_projects_recommended%7Cинтернет-магазин")  https://www.behance.net/gallery/129162947/E-commerce-concept-online-store?tracking_source=search_projects_recommended%7Cинтернет-магазин
            img(src="images/2023-03-20_08-34-18.png", alt="")
            p.img-caption Рисунок 3 – Ekaterina Beloglazova - Главная
            h2(data-target="6") 2.3 Изучение возможностей программы Figma
            p Figma — это графический онлайн редактор для проектирования и дизайна интерфейсов, сайтов и мобильных приложений с возможностью совместной работы над проектом.
            p Программа подойдет вам если вы связаны с веб-дизайном, разработкой мобильных приложений, сайтов, landing page, интернет-магазинов и т.д. За последнее время фигма набирает огромную популярность среди дизайнеров.
            p Достоинства Figma:
            p •	Скорость работы: программа работает очень быстро, даже при работе над большими проектами и на слабых компьютерах. Есть возможность работать напрямую из браузера или в приложении, которое можно установить на компьютер.
            p •	Большой функционал Figma: В платной версии намного больше функций
            p •	Автоматическое сохранение: проекты сохраняются автоматически в облаке на серверах Figma. Не нужно переживать, что внезапно отключат свет или пропадет интернет и вся работа пойдет на смарку.
            p •	Удобно демонстрировать работу: можно скопировать ссылку на свой проект и дать её заказчику или любому другому человеку.
            p •	Интерактивные прототипы: можно создавать интерактивные кликабельные прототипы, всплывающие формы и т.д., например это может помочь лучше продемонстрировать работу.
            p •	Бесплатные файлы для работы: можно найти огромное количество бесплатных плагинов и файлов для работы от сообщества фигмы, которые помогут вам работать быстрее. Это дизайн системы, UI киты, Wireframe, иллюстрации, иконки, файлы для веб дизайна и дизайна мобильных приложений.
            p •	Компоненты: есть возможность создавать компоненты. Это специальные элементы, которые можно редактировать в массовом порядке. Например, если создается кнопка, можно сделать из неё компонент, а затем скопируете её, то при редактировании главного компонента, копии также будут меняться. Это сильно упрощает работу и экономит время.
            p •	Стили текста и графики: также есть возможность создавать стили текста или графики и использовать их повторно.
            p •	Auto Layout: эта функция позволит сэкономить время на выравнивании и перестраивать элементы дизайна автоматически.
            p Начало работы в Фигме
            p В сервисе можно работать из браузера или скачать приложение Фигма на компьютер.
            p После регистрации пользователю доступны две рабочие области — графический редактор и менеджер файлов, в котором можно создавать проекты и изменять настройки профиля. Рассмотрим пункты меню менеджера файлов.
            p Профиль. В настройках профиля можно загрузить аватарку, сменить имя, пароль и email, на который приходят оповещения. Там же можно обновить тариф и удалить аккаунт.
            p Поиск. Ищите файлы и проекты, в которых вы участвуете, через поиск Search.
            p Последние файлы. В Фигме файлы сохраняются автоматически. Все файлы, которые вы открывали, можно увидеть во вкладке Recent.
            p Плагины. В пункте Plugins собраны расширения, которые помогут ускорить работу в Фигме. Например, с плагином Unsplash можно находить стоковые иллюстрации, не покидая Фигмы. А с Iconify под рукой дизайнера будут 40 000 векторных иконок на все случаи жизни. Плагины отсортированы по рекомендуемым, популярным и установленным.
            p Новый файл. Создать новый файл в Фигме можно через пункт Drafts или New File в правом углу экрана. По умолчанию файл называется Untitled.
            p Устройство редактора файлов Фигмы.
            p В новом файле пользователю доступны три области: рабочая область, панель инструментов и панель слоёв. Рассмотрим важные функции пунктов меню.
            p Поиск Search ищет пункты меню, а не элементы, которые вы создавали. Пригодится, если вам нужна конкретная команда, но вы забыли, где именно она находится.
            p Инструменты панели помогают применить действие к файлу, в котором вы работаете. Например, с помощью New file from Sketch можно импортировать файлы, созданные в графическом редакторе Скетч.
            p Фигма — это инструмент для совместной работы, она сохраняет изменения файла автоматически. Вы можете сохранить изменения немедленно, нажав Save to Version History или посмотреть историю изменений коллег, нажав Show Version History.
            p Чтобы сохранить файл Фигмы в pdf, используйте Export Frames to PDF. Пригодится для презентаций.
            p Панель Edit.
            p Панель позволяет работать с элементами дизайна в файле. Чтобы применить действие к элементу, его нужно выделить. Например, объект можно скопировать как код CSS, SVG или PNG-файл с помощью Copy As.
            p Функция Paste Over Selection позволяет разместить скопированный элемент в левом верхнем углу другого объекта.
            p Все новые объекты, созданные в файле, по умолчанию серого цвета. Бывают ситуации, когда вам нужно создать множество объектов с другим цветом. Используйте Set Default Properties: скопируйте цвет нужного объекта один раз и все последующие объекты будут созданы с заданными свойствами.
            p Группа команд Select All with подсвечивает все похожие объекты в файле: с одинаковыми свойствами, заливкой, шрифтами, эффектами и так далее.
            p Панель View.
            p Панель находится слева в меню редактора и дублируется справа. Она отвечает за масштабирование макета и навигацию по нему.
            p Из полезного — функция Pixel Preview. Фигма — векторный редактор, поэтому дизайнер видит ровные векторные линии. Подключая просмотр объекта в пикселях, можно увидеть, как элемент будет выглядеть на экране.
            p Масштабировать макет можно функциями Zoom In/Zoom Out.
            p Чтобы показать линейки и вытянуть направляющие в Фигме, используйте Rules.
            p Чтобы расширить рабочую область и получить больше простора для вдохновения, можно скрыть панель слоёв и интерфейс командами Layers Panel, Show/Hide UI.
            p Панель Preferences.
            p Панель определяет навигацию в файле. Первые три пункта — Snap to Geometry, Snap to Pixel Grid, Snap to Objects — настройки привязки. Помогут слегка примагнитить элементы и избежать «кривой» сетки, если вы работаете быстро.
            p Highlight Layers on Hover лучше держать включенным всегда — функция подсвечивает мелкие элементы дизайна при наведении — кнопки, буквы, иконки, значки.
            p Включенная функция Keyboard Zooms into Selection будет приближать/удалять макет относительно элемента, выбранного на экране.
            p Инструменты и возможности Фигмы.
            p Рассмотрим панель инструментов для работы с графикой и выравнивания объектов, выбора шрифтов, создания эффектов для слоёв и фигур.
            p Фреймы.
            p Фрейм или артборд — основной элемент дизайна в Фигме. Это законченный документ, который может быть страницей сайта или экраном мобильного приложения.
            p Вы можете задать размер фрейма самостоятельно или выбрать готовые размеры экранов популярных устройств — ноутбуков, часов, планшетов — в панели инструментов справа.
            p Фрейм объединяет объекты внутри себя. Когда вы создаёте дизайн внутри фрейма, в панели свойств слева будут добавляться слои. Слои в Фигме — это содержимое вашего фрейма: объекты, текст, фотографии.
            p Чтобы выровнять объекты во фрейме по оси X/Y или расстояние между элементами, используйте панель справа.
            p Объекты внутри фрейма можно группировать. Допустим, вы делаете несколько страниц сайта. На каждой странице внизу экрана у вас будут контакты: телефон и электронная почта. Сгруппируйте объекты из меню Object → Group Selection или сочетанием клавиш Ctrl (Cmd) + G. Вы увидите изменения в слоях объектов — они объединились в группу. Теперь вы можете перемещать все объекты разом.
            p Дополнительно вы можете ограничивать поведение элементов во фрейме. Например, вы хотите, чтобы кнопка вашего дизайна была всегда в углу экрана, даже если размер фрейма изменится. Выберите объект во фрейме и используйте инструмент Constraints в панели свойств справа.
            p Фрейм — это законченный дизайн, его можно скачать одним файлом. При сохранении убедитесь, что все объекты находятся внутри фрейма. Если случайно переместить слой объекта за пределы фрейма, можно потерять часть дизайна. Перед скачиванием, проверьте превью файла, и выберите нужный формат.
            p Модульная сетка.
            p Сетка в Фигме помогает упорядочить все элементы дизайна во фрейме. Чтобы легко адаптировать дизайн от одного устройства к другому, используйте в Фигме 12 колоночную модульную сетку (Bootstrap).
            p Для настройки сетки нажмите «+» в блоке Layout Grid.
            p Задайте количество колонок, их цвет и прозрачность. Вы можете настроить тип сетки — сделать её адаптивной, выровнять по центру или краю.
            p Некоторым дизайнерам удобно добавлять вертикальный ритм, чтобы перемещать объекты по сетке и настраивать расстояние между элементами. Для этого нажмите «+» в блоке Layout Grid ещё раз — появится дополнительная сетка с шагом 10 пикселей.
            p Чтобы элементы дизайна не наезжали на края фрейма, используйте монтажные области. Чтобы контролировать отступы, можно использовать дополнительную сетку. Создайте одну колонку слева или справа нужной ширины, сделайте неброский цвет.
            p Для удобства можно выставить параметр Gutter = 0 и превратить колонку в линию с одним видимым краем.
            p Векторные формы.
            p Создавайте векторные объекты инструментом Shape Tool. С его помощью можно отрисовывать элементы интерфейса, например, иконки.
            p Основные векторные объекты — прямоугольник, линия, треугольник, стрелка, круг, звезда. Вы можете вставлять объекты произвольной формы или зажать клавишу Shift и вставить объект правильной формы. Если нажать Alt — объект растягивается из центра.
            p Панель свойств объектов находится справа. Рассмотрим основные функции работы с объектами и покажем, как сделать в Фигме иконку «Закладка», используя прямоугольник произвольной формы.
            p В верхней части панели можно изменить расположение объекта, растянуть его по оси X/Y. Выберем Corner Radius, чтобы скруглить углы нашего прямоугольника, как у закладки из примера. По умолчанию свойство применяется ко всем сторонам объекта. Чтобы выбрать два верхних угла, нажмём Independed Radius.
            p Поработаем с обводкой объекта. Толщина линии меняется в пункте Stroke заданным значением или мышкой. Заливка объекта нам не нужна, можно скрыть её в пункте Fill, нажав на «глаз».
            p Вытянем нижнюю сторону прямоугольника и сделаем его похожим на флаг. Чтобы редактировать фигуру, кликнете по ней дважды.
            p В разделе Effects можно добавить тень или размытие объекту. Чтобы сохранить иконку, перейдите в раздел Export и выберите формат SVG.
            p Изображения.
            p Добавьте одно или несколько изображений в макет через панель File, инструмент Place Image или просто перетащите их с рабочего стола.
            p В Фигме фото вставляется как shape, а не как отдельный объект. По сути, мы заливаем изображением фрейм — прямоугольник. Поэтому, мы можем изменить заполнение фрейма параметрами Fill, Fit, Crop, Tile.
            p С включенным параметром Fill, изображение заполняет весь фрейм. При этом сложно соблюсти его пропорции, и картинка может обрезаться.
            p С включенным параметром Fit, изображение отображается во фрейме полностью. Если пропорции фрейма не совпадают с пропорциями картинки, в нём появится пустое пространство.
            p С включенным параметром Crop, можно приблизить нужный ракурс изображения, обрезав «лишние» части. С включенным параметром Tile, вы сможете создать паттерн или узор.
            p С включенным параметром Tile, вы сможете создать паттерн или узор.
            p Регулируйте в Фигме цвета, яркость изображения, контраст, насыщенность, яркость отдельных участков фото.
            p Чтобы добавить изображению градиент, используйте знак «+» в панели свойств. Выберите стиль градиента: Linear (Линейный), Radial (Радиальный), Angular (Угловой) или Diamond (Ромбовидный).
            p Используйте дополнительные настройки цвета и изменяйте положение градиента, чтобы добиться нужного эффекта изображения.
            p Вы можете добавлять цвета или другие фотографии к изображению с инструментом «смешивание слоёв». Например, чтобы попасть в фирменный стиль сайта или добавить фотографии индивидуальности.
            p Вы можете применять векторные объекты к фотографиям и использовать их как маски. Чтобы сделать маску в Фигме, создайте объект, перенесите слой ниже фотографии. Выделите оба слоя и выберите панель Object → Use as mask (горячие клавиши для Windows: Ctrl + Alt + M, для Mac OS: Cmd + Opt + M).
            p Вы можете загружать в Фигму SVG-файлы и работать с ними. SVG-файлы можно загрузить с компьютера либо переносить прямо из Adobe Illustrator или Sketch с помощью горячих клавиш Cntrl + C и Cntrl + V.
            p Обычно файлы такого типа вставляются как фрейм. Перейдите в слои, объедините векторные объекты в группу клавишами Ctrl+G и перетяните их выше фрейма.
            p Эффекты и маски.
            p Фигма позволяет работать с заливкой фреймов и текстовых слоёв. Инструменты заливки находятся в левой панели свойств. Вы можете выбрать цвет, прозрачность, указать конкретные значения цвета.
            p В Фигме шесть типов заливки: сплошной цвет (Solid), линейный градиент (Linear), радиальный градиент (Radial), угловой градиент (Angular), радиальный с четырьмя лучами (Diamond), изображение (Image). По умолчанию для объекта выбран режим ровной заливки Solid.
            p Переключитесь на Linear — градиент с осью, вдоль которой изменяется цвет. По умолчанию он с двумя точками, одна из которых прозрачная. Добавьте цвета ползунком или укажите значение цвета в поле Hex-кода.
            p Текст.
            p По умолчанию вам доступна библиотека шрифтов Google Fonts, если вы хотите загружать свои шрифты в Фигму — скачайте десктопную версию Фигмы или установите Font Installers (Windows/Mac OS), чтобы загружать их в браузер.
            p Инструменты для работы с текстовым слоем стандартные: начертание, размер, выравнивание текста, высота строки, отступ между параграфами и красная строка.
            p В меню Advanced Type есть три типа изменения размера текстового блока: 1) Width, где ширина подстраивается под контент, 2) Fixed, чтобы задать блок фиксированной ширины 3) Height, чтобы подстроить высоту текстового блока под его контент.
            p Компоненты.
            p Компоненты в Фигме помогают применять изменения к группе элементов. Это экономит время дизайнера при изменениях макета. Чтобы превратить объект или группу объектов в компонент, выделите их и нажмите Create Component (Ctrl+Alt+K). Теперь этот фрейм — родительский компонент. Создайте его копии, чтобы получить дочерние компоненты. Все изменения родительского компонента будут отражаться на дочерних компонентах.
            p Вы можете менять настройки дочернего компонента, делая его относительно самостоятельным. Например, можно вручную задать компоненту размер, цвет, обводку, отличные от родительского компонента.
            p При этом связь между компонентами не потеряется. Внесите новый объект в родительский компонент, и он отобразиться в дочерних компонентах, даже измененных ранее.
            p Чтобы восстановить нарушенную связь между родительским и дочерним компонентом, выделите дочерний компонент, нажмите иконку возврата действия и сбросьте параметры, которые меняли в нём вручную.
            p Когда вы работаете с компонентами, удобно держать их в одном месте, чтобы они не терялись на холсте. Организовать компоненты для небольших проектов, например, сайта из десятка страниц, можно в отдельном фрейме-контейнере.
            p Создайте новый фрейм, назовите его Components и вложите в него родительские компоненты.
            p Наряду с компонентами в Фигме можно создавать стили. Это коллекции текста, цветов и эффектов, которые вы сможете применять к элементам дизайна. Когда вы меняете свойства стиля, они меняются во всех объектах, использующих его.
            p Текст. Создайте стили, которые будете применять ко всем возможным текстам вашего дизайна: заголовкам, параграфам, подписям, тэгам. Используйте панель свойств справа.
            p Сохраните все варианты текстовых стилей в отдельном фрейме и применяйте при работе с текстами.
            p Цвет. По аналогии с текстовыми стилями, создайте заливки с основными цветами вашего дизайна. Подпишите каждый цвет и укажите его код.
            p Эффекты. Создайте стили размытия слоя, фона и тени.
            p Для работы с компонентами Фигма разработала функцию Auto Layout. Она помогает избежать проблемы с размером контента в новых компонентах. Допустим, вы создали дочерний компонент кнопки и вписали в нём новую подпись. Размеры кнопки при этом не изменились и ваш дизайн выглядит непрофессионально.
            p Плагины для Фигмы.
            p Плагины расширяют возможности Фигмы, помогают ускорить работу и автоматизировать рутинные задачи. Вы можете просматривать плагины, как в магазине приложений: на карточке плагина описаны функции, количество установок и лайков.


            h2(data-target="7") 2.4	Прототип и финальный дизайн веб-сайта
            p С готовыми реферансами можно начинать разработку прототипа будущего сайта. Прототип — это промежуточный вариант между финальным дизайном и спроектированной структурой. Он уже имеет вид готового сайта, но без детальной проработки.
            p Во время создания прототипы работают непосредственно с композицией и компоновкой, подбором шрифтов.
            p В прототипе вы можете:
            p •	Вместо картинок рисовать обычные прямоугольники или круги
            p •	Вместо иконок делать условные обозначения в виде обычных квадратов
            p •	Не придерживаться строгих отступов
            p Все это можно доработать в финальном дизайне. Прототип нужен для того, чтобы можно было наглядно увидеть, как примерно будет выглядеть конечный дизайн.
            p На этапе финального дизайна нужно добавить цвета в прототип, выровнять все строго по сетке и подкорректировать отступы, добавить картинки и иконки туда, где они должны быть.
            p В процессе финального дизайна можно немного отступать от прототипа в пользу каких-то более эстетически привлекательных дизайн-решений.
            p Главная страница:
            img(src="images/2023-03-20_08-49-59.png", alt="")
            p.img-caption Рисунок 4 – Главная страница

            h2(data-target="8") 3. Литература
            li: a(href="http://citforum.ru/")  CIT-форум
                p Крупнейший архив научной и практической информации по всем направлениям компьютерных наук.
            
            li: a(href="https://www.securitylab.ru/")  SecurityLab
                p Информационный портал, посвященный информационной безопасности.

            li: a(href="http://www.sibguardian.info/")  Системы безопасности от А до Я
                p Сайт посвящен системам защиты информации. Содержит множество полезных статей, справочной и обучающей литературы.
            
            li: a(href="https://www.owasp.org/index.php/Main_Page")  Open Web Application Security Project
                p Сайт OWASP - открытый проект обеспечения безопасности веб-приложений.

            li: a(href="https://searchsecurity.techtarget.com/")  SearchSecurity
                p Ресурс, посвященный теме информационной безопасности.

            li: a(href="https://codeby.net/")  Форум информационной безопасности Codeby.net
                p Данный сайт посвящен информационной безопасности.

            li: a(href="https://www.itsec.ru/")  InformationSecurity
                p Сайт посвящен информационной безопасности в целом, также есть свой форум.

            li: a(href="https://learn.microsoft.com/ru-ru/windows/dev-environment/javascript/vue-beginners-tutorial")  Vue для начинающих
                p Руководство. Vue для начинающих | Microsoft Learn



    include ../includes/modules/footer

            





